<template>
	<div class="page">
		<div class="headerTop">
			项目名称:
			<el-input type="text" v-model="keyword" placeholder="请输入查询关键字" class="inpu"></el-input>
			<el-button type="primary" size="small" style="vertical-align:middle;margin-left:0.4rem;" @click="searchGoods">查询</el-button>
		</div>
		<div class="header_bottom">
			<el-button type="success" @click="add" size="small">添加新项目</el-button>
			<el-button type="primary" @click="showAll" size="small" v-if="all">显示全部</el-button>
			<!--<el-button type="danger" size="small"  @click="deleteGoods">删除</el-button>-->
		</div>
		<div class="container_table">
			<el-table :data="tabledata" border size="mini" style="width: 99.4%;" 
			 :header-cell-style="{
				'background-color':tableHead,
				'color': 'white',
                'fontSize':'0.3rem',
				'height':'0.6rem',
				'line-height':'0.6rem',
				'padding':'0.1rem'
			}" :cell-style="{'fontSize':'0.3rem'}">
				<!-- <el-table-column type="selection" min-width="30">
				</el-table-column> -->
				<el-table-column label="ID" prop="id" align="center" min-width="50">
				</el-table-column>
				<el-table-column prop="product_name" label="项目名称" align="center" min-width="180">
				</el-table-column>
				<el-table-column prop="product_key" label="KEY" align="center" min-width="140">
				</el-table-column>
				<!-- <el-table-column label="缩略图" align="center" min-width="80">
					<template slot-scope="scope">
						<a v-if="scope.row.product_image" :href="baseurl+scope.row.product_image" target="_blank"><img :src="baseurl+scope.row.product_image"
							 style="width:60px;height:40px;vertical-align: middle;color:#999;" title="点击查看原图" alt="地址错误" /></a>
						<span v-else style="font-size:0.25rem;">暂无图片</span>
					</template>
				</el-table-column> -->
				<el-table-column prop="product_desc" label="项目描述" align="center" min-width="180">
				</el-table-column>
				<el-table-column prop="equips_count" label="设备数量" align="center" min-width="80">
				</el-table-column>
				<el-table-column prop="views_count" label="组态数量" align="center" min-width="80">
				</el-table-column>
				<el-table-column label="状态" align="center" min-width="120">
					<template slot-scope="scope">
						<el-switch class="mar_l" v-model="scope.row.product_state" :width="stateWidth" @change="sureSetState(scope.row,scope.row.product_state)"
						 active-color="#13ce66" inactive-color="#ccc" active-text="已启用" inactive-text="已禁用" :active-value="one"  :inactive-value="zero">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="add_time" label="添加时间" align="center" min-width="150">
				</el-table-column>
				<el-table-column label="操作" min-width="140" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="modifyform(scope.row)">编辑</el-button>
						<!-- <el-button type="primary" size="mini" @click="setProduct(scope.row)">配置</el-button> -->
						<!-- <el-button type="primary" size="mini" @click="authorize(scope.row)">授权</el-button> -->
						<el-button @click="sureDelete(scope.row)" type="danger" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="current_change" :current-page="queryParams.pageNo"
				 :page-size="queryParams.pageSize" :page-sizes="[10,15,20]" layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
				</el-pagination>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		name: 'productList',
		data() {
			return {
				one:1,
				zero:0,
				stateWidth: 70,
				all: false,
				keyword: '', //输入框内容
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					total: 0
				},
				//baseurl: this.$baseurl,
				userId:localStorage.getItem("userId"),
				tableHead:localStorage.getItem("bgcolor"),
				tabledata: []
			}
		},

		created() {
			this.keyword = localStorage.getItem('productKey') || '';
			this.queryParams.pageNo=Number(localStorage.getItem("currentProductNo")) || 1;
			this.showList(this.queryParams.pageNo, this.queryParams.pageSize, this.keyword);
		},
		
		beforeRouteLeave(to, from, next) {
			// 可以访问组件实例 `this`
			//console.log(to.name);
			if(to.name=='addProduct' || to.name=='editProduct') {
				localStorage.removeItem('currentProductNo');
				localStorage.removeItem('productKey');
			}else{
				localStorage.setItem("currentProductNo",this.queryParams.pageNo);
				localStorage.setItem("productKey", this.keyword);
			}
			next();
		},
		
		methods: {
			current_change: function(currentPage) {
                this.queryParams.pageNo = currentPage;
				this.showList(currentPage, this.queryParams.pageSize,this.keyword);
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
				this.showList(this.queryParams.pageNo, val,this.keyword);
			},

			//获取数据函数
			showList: function(num, size, keyword) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/product/lists',
						data: {
							'limit': size,
							'page': num,
							'keyword': keyword
							
						}
					}).then(res => {
						if (res && res.data.result == "success") {
							that.tabledata = res.data.data;
							for (var i = 0; i < that.tabledata.length; i++) {
								that.tabledata[i].addTime = that.tampToDate(res.data.data[i].add_time * 1000)
							}
							this.queryParams.total = res.data.count;
						}
					}).catch(error => {
						console.log(error);
						this.tabledata = [];
						this.queryParams.total = 0;
						this.queryParams.pageNo = 1;
					});
			},
			// 点击搜索输入框里的内容
			searchGoods() {
				this.queryParams.pageNo=1;
				this.showList(1, this.queryParams.pageSize, this.keyword);
				this.all = true;
			},
			showAll() {
				this.showList(1, this.queryParams.pageSize);
				this.all = false;
				this.keyword = '';
				this.queryParams.pageNo=1;
			},
			changeState(row, value) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/product/setState',
						data: {
							'state': value,
							'id': row.id
						}
					}).then(res => {
						if (res && res.data.result == "success") {
							this.$message({
								message: '恭喜,修改项目状态成功!',
								type: 'success',
								center: true
							});
						}
					}).catch(error => {
						console.log(error);
						this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.keyword);
					});
			
			},
			sureSetState(row,value) {
				this.$confirm('改变状态将影响到数据的接收与显示, 是否确认此操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.changeState(row,value);
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消改变状态！'
					// });
					this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.keyword);
				});
			},
			add() {
				this.$router.push({
					name: 'addProduct',
					component: 'addProduct'
				})
			},
			modifyform(row) {
				this.$router.push({
					name: 'editProduct',
					path: 'editProduct'
				})
				localStorage.setItem("editProductId", row.id);
			},

			sureDelete(row) {
				this.$confirm('删除后无法恢复, 是否确认删除该项目?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleClick(row);
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消删除'
					// });
				});
			},
			handleClick(row) {
				var that = this;
				// console.log(this.dynamicValidateForm.domains)
				this.$http({
					method: 'post',
					url: 'api/product/delete',
					data: {
						"id": row.id
						
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						
						this.$message({
							message: '恭喜,删除项目成功!',
							type: 'success',
							center: true
						});
						this.showList(this.queryParams.pageNo, this.queryParams.pageSize,this.keyword);
					}

				}).catch(error => {
					console.log(error);
				});
            }
		}
	}
</script>

<style scoped>
	@media all and (max-width:1920px) {
		.mar_l{
		  -ms-transform: translateX(0.4rem)!important;
		  -webkit-transform: translateX(0.4rem)!important;
		  transform: translateX(0.4rem)!important;
		}
	}
	
	@media all and (max-width:1600px) {
		.mar_l{
		  -ms-transform: translateX(0.4rem)!important;
		  -webkit-transform: translateX(0.4rem)!important;
		  transform: translateX(0.4rem)!important;
		}
		#addform {
		    margin-left: -0.3rem!important;
		}
	}
	@media all and (max-width:1440px) {
		.mar_l{
		  -ms-transform: translateX(0.25rem)!important;
		  -webkit-transform: translateX(0.25rem)!important;
		  transform: translateX(0.25rem)!important;
		}
	}
	
	@media all and (max-width:1366px) {
		.mar_l{
		  -ms-transform: translateX(-0.1rem)!important;
		  -webkit-transform: translateX(-0.1rem)!important;
		  transform: translateX(-0.1rem)!important;
		}
		#addform {
		    width: 100%!important;
		    margin-left: 0rem!important;
		}
	}
	
	#addform {
		text-align: left;
		width:100%;
		margin-top: 0.3rem;
		line-height:0.4rem;
	}
	
	.inpu {
	    width: 5rem;
	    vertical-align: middle;
	    /* transform: translateY(0.1rem)!important; */
	}
	
	.inpu /deep/ .el-input__inner{
		padding-left:4px;
		padding-right:4px;
	}
	
</style>
